<template>
  <BasicModal class="basicModalBox" v-bind="$attrs" @register="registerModal" :title="title" :centered="centered" @ok="closeModal"  width="1360px" footer-hide>
    <div class="contentContainer">
      <div class="flowChatBox superviseFlow">
        <div class="flowChatTitle">委托检验流程</div>
        <div class="flowChatInfo">
          <div class="flowChatContainer">
            <div class="firstLine">
              <div class="firstPhase">
                <div class="entrustPublish currency" :class="{ activeProcessed:flowChart.z1 === '1',currentActive:flowChart.z1 ==='2'}">委托发布</div>
                <div class="submitBtn" :class="{ activeProcessed:flowChart.z2 === '1',currentActive:flowChart.z2 ==='2'}">
                  <span class="leftLine"></span>
                  <span class="submitText">提交</span>
                  <span class="rightLineAndArrow"></span>
                </div>
                <div class="noPass" :class="{ activeProcessed:flowChart.z4 === '1',currentActive:flowChart.z4 ==='2'}">
                  <div class="noPassRight"></div>
                  <span class="noPassText">审核不通过</span>
                  <div class="noPassLeft"></div>
                </div>
                <div class="firstPhase">
                  <div class="firstTrial currency" :class="{ activeProcessed:flowChart.z3 === '1',currentActive:flowChart.z3 ==='2'}">委托审核</div>
                </div>
                <div class="submitBtn" :class="{ activeProcessed:flowChart.z12 === '1',currentActive:flowChart.z12 ==='2'}">
                  <span class="leftLine"></span>
                  <span class="submitText">审核通过</span>
                  <span class="rightLineAndArrow"></span>
                </div>
              </div>
              <!-- 任务分配 -->
              <div class="firstPhase">
                <!-- 样品入库 -->
                <div class="sampleStorage">
                  <span class="sampleStorageLine" :class="{ activeProcessed:flowChart.z10 === '1',currentActive:flowChart.z10 ==='2'}"></span>
                  <span class="currency sampleStorageText" :class="{ activeProcessed:flowChart.z11 === '1',currentActive:flowChart.z11 ==='2'}">样品入库</span>
                </div>
              <div class="currency" :class="{ activeProcessed:flowChart.z13 === '1',currentActive:flowChart.z13 ==='2'}" style="height: 42px">任务分配</div>
              <div class="leftLineBtn" :class="{ activeProcessed:flowChart.z14 === '1',currentActive:flowChart.z14 ==='2'}"></div>
              <div class="experimentStep">
                <div class="currency" :class="{ activeProcessed:flowChart.z15 === '1',currentActive:flowChart.z15 ==='2'}">实验人员进行实验</div>
                <div class="topWards">
                  <div class="topwardsSubmitBtn" :class="{ activeProcessed:flowChart.z17 === '1',currentActive:flowChart.z17 ==='2'}">
                    <span class="topwardLleftLine"></span>
                    <span class="submitText">生成</span>
                    <span class="topwarRrightLineAndArrow"></span>
                  </div>
                  <div class="topwardsSubmitBtn" :class="{ activeProcessed:flowChart.z18 === '1',currentActive:flowChart.z18 ==='2'}">
                    <span class="topwardLleftLine"></span>
                    <span class="submitText">生成</span>
                    <span class="topwarRrightLineAndArrow"></span>
                  </div>
                  <div class="deviceRun currency" :class="{ activeProcessed:flowChart.z20 === '1',currentActive:flowChart.z20 ==='2'}">设备运行记录</div>
                  <div class="sampleRecord currency" :class="{ activeProcessed:flowChart.z21 === '1',currentActive:flowChart.z21 ==='2'}">样品流转记录</div>
                </div>
                
              </div>
              <div class="leftLineBtn" :class="{ activeProcessed:flowChart.z16 === '1',currentActive:flowChart.z16 ==='2'}"></div>
              <div class="currency" :class="{ activeProcessed:flowChart.z19 === '1',currentActive:flowChart.z19 ==='2'}">填写原始记录</div>
              <div class="submitBtn" :class="{ activeProcessed:flowChart.z22 === '1',currentActive:flowChart.z22 ==='2'}">
                <span class="leftLine"></span>
                <span class="submitText">提交</span>
                <span class="rightLineAndArrow"></span>
              </div>
              <!-- 实验复核 -->
              <div class="experimentalReview">
                <div class="currency" :class="{ activeProcessed:flowChart.z23 === '1',currentActive:flowChart.z23 ==='2'}">复审实验原始记录</div>
                <div class="experimentalReviewInfo">
                  <span class="downLine" :class="{ activeProcessed:flowChart.z24 === '1',currentActive:flowChart.z24 ==='2'}"></span>
                  <div class="judgeItem">
                    <div class="judgeItemInfo" :class="{ activeProcessed:flowChart.z25 === '1',currentActive:flowChart.z25 ==='2'}">
                      <span>判断是否有下一个实验记录</span>
                    </div>
                    <!-- 是，进入实验填写阶段 -->
                    <div class="experimentalsubmit" :class="{ activeProcessed:flowChart.z26 === '1',currentActive:flowChart.z26 ==='2'}">
                      <span class="rightCircle"></span>
                      <span class="submitText">是</span>
                      <span class="leftTopLineAndArrow"></span>
                    </div>
                  </div>
                  <!-- 否进入报告 -->
                  <div class="lineSubmitBtn" :class="{ activeProcessed:flowChart.z27 === '1',currentActive:flowChart.z27 ==='2'}">
                    <span class="topLine"></span>
                    <span class="submitText">否</span>
                    <span class="bottomLineAndArrow"></span>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <div class="secondLine">
              <!-- 实验报告 -->
              <div class="reportInfo">
                <div class="reportPhase">
                  <div class="firstTrial currency editReport" :class="{ activeProcessed:flowChart.z28 === '1',currentActive:flowChart.z28 ==='2'}">编制实验报告</div>
                  <div class="leftSubmitBtn" :class="{ activeProcessed:flowChart.z29 === '1',currentActive:flowChart.z29 ==='2'}">
                    <span class="leftLineAndArrow"></span>
                    <span class="submitText">提交</span>
                    <span class="rightLineAndCircle"></span>
                  </div>
                  <div class="firstTrial currency" :class="{ activeProcessed:flowChart.z30 === '1',currentActive:flowChart.z30 ==='2'}">报告审核</div>
                  <div class="ratifyNoPass" :class="{ activeProcessed:flowChart.z31 === '1',currentActive:flowChart.z31 ==='2'}">
                    <div class="ratifyNoPassRight"></div>
                    <span class="noPassText">审核不通过</span>
                    <div class="ratifyNoPassLeft"></div>
                  </div>
                </div>
                <div class="reportPhase">
                  <div class="leftSubmitBtn" :class="{ activeProcessed:flowChart.z32 === '1',currentActive:flowChart.z32 ==='2'}">
                    <span class="leftLineAndArrow"></span>
                    <span class="submitText">审核通过</span>
                    <span class="rightLineAndCircle"></span>
                  </div>
                  <div class="firstTrial currency" :class="{ activeProcessed:flowChart.z33 === '1',currentActive:flowChart.z33 ==='2'}">报告批准</div>
                  <div class="reportNoPass" :class="{ activeProcessed:flowChart.z34 === '1',currentActive:flowChart.z34 ==='2'}">
                    <div class="reportNoPassRight"></div>
                    <span class="noPassText">批准不通过</span>
                    <div class="reportNoPassLeft"></div>
                  </div>
                  <div class="leftSubmitBtn" :class="{ activeProcessed:flowChart.z35 === '1',currentActive:flowChart.z35 ==='2'}">
                    <span class="leftLineAndArrow"></span>
                    <span class="submitText">批准通过</span>
                    <span class="rightLineAndCircle"></span>
                  </div>
                  <div class="firstTrial currency" :class="{ activeProcessed:flowChart.z36 === '1',currentActive:flowChart.z36 ==='2'}">报告盖章</div>
                  <div class="towardsLeftArrow" :class="{ activeProcessed:flowChart.z37 === '1',currentActive:flowChart.z37 ==='2'}"></div>
                  <div class="firstTrial currency" :class="{ activeProcessed:flowChart.z38 === '1',currentActive:flowChart.z38 ==='2'}">报告下载<br>（打印归档）</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getProcess } from './FlowChart.api';
  const title = '流程图';
  const centered = ref(true);
  const flowChart = ref([]);
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    console.log(data);
    let params = {
      entrustId: data.record.id,
      entrustType:'委托检验',
    }
    console.log('params',params);
    getFlowChart(params);
    // setModalProps({ });
  });
  const getFlowChart = async (params) =>{
    let result = await getProcess(params);
    console.log('流程结果', result);
    if(result.code === 200){
      flowChart.value  = result.result;
    }    
  }
  
  
</script>

<style scoped lang="less">
  @import url('./src/css/index.less');
</style>
